<template>
  <div class="functionBox">
    <!-- 功能区 -->
    <div class="FunBox">
      <router-link to="/vote" tag="div" class="box">
        <van-icon name="todo-list" color="#1d9aca" size="0.8rem" />
        <span>社区投票</span>
      </router-link>

      <router-link to="/lostFound" tag="div" class="box">
        <van-icon name="point-gift" color="blue" size="0.8rem" />
        <span>失物招领</span>
      </router-link>

      <div class="box">
        <router-link to="/SearchNotice" tag="div" class="box">
          <van-icon name="award" color="#5ab534" size="0.8rem" />
          <span>寻物启事</span>
        </router-link>
      </div>

      <div class="box">
        <router-link to="/yield" tag="div" class="box">
          <van-icon name="gold-coin" color="#b39900" size="0.8rem" />
          <span>闲置转让</span>
        </router-link>
      </div>
      <div class="box">
        <router-link to="/communityBorrow" tag="div" class="box">
          <van-icon name="send-gift" color="#e8002a" size="0.8rem" />
          <span>社区借用</span>
        </router-link>
      </div>

      <router-link to="/teamShopping" tag="div" class="box">
        <van-icon name="shopping-cart" color="#96549c" size="0.8rem" />
        <span>社区团购</span>
      </router-link>

      <router-link to="/propertyPayment" tag="div" class="box">
        <van-icon name="gold-coin" color="#f5aa01" size="0.8rem" />
        <span>物业缴费</span>
      </router-link>

      <router-link to="/repair" tag="div" class="box">
        <van-icon name="umbrella-circle" color="#f49545" size="0.8rem" />
        <span>物业报修</span>
      </router-link>

      <router-link to="/door" tag="div" class="box">
        <van-icon name="card" color="#9b3ff9" size="0.8rem" />
        <span>智慧门禁</span>
      </router-link>

      <router-link to="/stores" tag="div" class="box">
        <van-icon name="shop" color="#f49545" size="0.8rem" />
        <span>社区店铺</span>
      </router-link>

      <router-link to="/complaint" tag="div" class="box">
        <van-icon name="column" color="#b6ff00" size="0.8rem" />
        <span>物业投诉</span>
      </router-link>

      <router-link to="/monitor" tag="div" class="box">
        <van-icon name="video" color="#7effb3" size="0.8rem" />
        <span>社区监控</span>
      </router-link>
    </div>
    <!-- 更多 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item title="更多功能" name="1">
        <div class="FunBox">
          <router-link to="/home/sharelife" tag="div" class="box">
            <van-icon name="fire" color="#bf0087" size="0.8rem" />
            <span>趣事分享</span>
          </router-link>

          <router-link to="/wisdomalertor" tag="div" class="box">
            <van-icon name="bell" color="#ff6500" size="0.8rem" />
            <span>智能报警</span>
          </router-link>

          <router-link to="/wisdomdoor" tag="div" class="box">
            <van-icon name="video" color="#7b42ff" size="0.8rem" />
            <span>智能门卫</span>
          </router-link>

          <router-link to="/hotNews/0" tag="div" class="box">
            <van-icon name="coupon-o" color="#7b42ff" size="0.8rem" />
            <span>热点新闻</span>
          </router-link>

          <router-link to="/weather" tag="div" class="box">
            <van-icon name="flag-o" color="#7b42ff" size="0.8rem" />
            <span>出行指南</span>
          </router-link>

          <router-link to="/aBeautifulRticle" tag="div" class="box">
            <van-icon name="font" color="#7b42ff" size="0.8rem" />
            <span>每日一文</span>
          </router-link>

          <router-link to="/LickTheDog" tag="div" class="box">
            <van-icon name="smile" color="#f5aa01" size="0.8rem" />
            <span>娱乐</span>
          </router-link>

          <!-- <router-link to="/wisdomdoor" tag="div" class="box">
									<van-icon name="video"  color="#7b42ff" size="0.8rem"/>
									<span>智能门卫</span>
          </router-link>-->
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const activeNames = ref(['0'])
    return { activeNames }
  },
  data() {
    return {}
  },

  methods: {},

  components: {},
}
</script>

<style scoped>
.FunBox {
  width: 100%;
  padding: 1px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.FunBox > a,
.FunBox > div {
  width: 25%;
  text-align: center;
  padding: 10px 1px 0px 1px;
}
.box > i {
  display: block;
}
.box > span {
  font-size: 16px;
}
.van-collapse-item__content {
  padding: 0;
  color: #000000;
}
</style>
